<template>
  <div class="infinite-container">
    <div class="tips-warning center">
    提示：未通过身份认证的就诊人无法进行预约挂号
    </div>
    
    <div>
      <div class="mg10">
        <mu-flexbox  class="family-item bgwhite re" v-for="f in familys" :key="f.uid" >
          <mu-flexbox-item>
            <!-- <div class="default-arrow" ></div> -->
            <div class="family-header" @click="handleClick(f)">
              <mu-flexbox>
                <mu-flexbox-item>
                  <img src="../../assets/images/middle_man.png"  v-if="f.sexcode===1" width="64" />
                  <img src="../../assets/images/middle_women.png"  v-else width="64" />
                </mu-flexbox-item>
                <mu-flexbox-item :grow="4">
                  <div>
                    <span class="title">{{f.realname}}</span>
                    <span class="label label-success" v-if="f.certificationValidityPeriod === '1'">已认证</span>
                    <span class="label label-warning" v-else>未认证</span>
                  </div>
                  <div class="mt6"><span class="t3">{{f.idcard}}</span></div>
                </mu-flexbox-item>
              </mu-flexbox>
            </div>
            <div class="re min-height" v-if="f.listHisBusCard.length > 1">
            <p v-for="(item, index) in f.listHisBusCard" :key="index" @click="selectPerson(f, item)">
              {{item.patientBusCardTypeDes}} - {{item.patientBusCardNumber}}
              <i class="iconfont icon-small-arrow-right fr t3"></i>
            </p>
            </div>
          </mu-flexbox-item>
        </mu-flexbox>
      </div>
  </div>


  <mu-flexbox :gutter="0" v-show="familys.length < 6" class="pd40" style="margin-top:4em;">
    <mu-flexbox-item>
      <mu-raised-button class="submit-btn no-shadow" label="添加就诊人" to="/setting/family/add" fullWidth primary />
    </mu-flexbox-item>
  </mu-flexbox>
  <mu-flexbox :gutter="0" class="pd40 mt10">
    <mu-flexbox-item>
      <mu-raised-button class="submit-btn second no-shadow" label="管理就诊人" to="/setting/family" fullWidth primary />
    </mu-flexbox-item>
  </mu-flexbox>

  </div>
</template>

<script>
import {commonAjax, RESTFUL_API} from '@/api/api'
// import {CARD_TYPE, FAMILY_RALATION} from '@/api/const'

export default {
  data () {
    return {
      familys: []
    }
  },
  mounted () {
    this.getFamilys()
  },
  methods: {
    getFamilys () {
      this.$store.commit('UPDATE_LOADING')
      commonAjax(`${RESTFUL_API.listFamily}`, {[this.$APP_PLATFORM_NAME]: sessionStorage[this.$APP_PLATFORM_NAME]}).then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 1) {
          this.familys = res.data.data || []
        } else {
          this.$store.commit('UPDATE_TOAST', {
            message: res.data.msg
          })
        }
      }).catch(res => {
        this.$store.commit('UPDATE_LOADING')
      })
    },
    handleClick (f) {
      // todo
      const cards = f.listHisBusCard
      if (cards.length > 1 || cards.length === 0) {
        return
      }
      f.patientcode = cards[0].patientBusCardId
      f.patientcodeNumber = cards[0].patientBusCardNumber
      sessionStorage.familyPerson = JSON.stringify(f)
      sessionStorage.selectFlag = '1'
      window.history.back()
    },
    selectPerson (f, item) {
      f.patientcode = item.patientBusCardId
      f.patientcodeNumber = item.patientBusCardNumber
      sessionStorage.familyPerson = JSON.stringify(f)
      sessionStorage.selectFlag = '1'
      window.history.back()
    }
  },
  beforeDestroy () {
  }
}
</script>

<style lang="less" scoped>
.family-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 0.6em;
    border-radius: 8px;
    .default-arrow {
      background: url(../../assets/images/tab_qhjzr.png) no-repeat;
      background-size: 40px;
      width: 40px;
      height: 40px;
      position: absolute;
      top: 0;
      right: 0;
    }
    .family-header {
      padding-bottom: .6em;
    }
    .title {
      font-size: 1.2em;
    }
    .icon-iconnan {
      color: #64A9F6;
      font-size: .9em;
    }
    .icon-iconnv {
      color: #F8868B;
      font-size: .9em;
    }
    p {
      margin: 0.6em 0 0 0;
      color: #666;
    }
    .right-button {
      position: absolute;
      right: 0;
      top: 0;
    }
    .min-height {
      // min-height: 40px;
      p {
        border-top: 1px solid #f2f2f2;
        padding: 10px 0;
      }
    }
    .label {
      border-radius: 10px;
      color: #fff;
      font-size: 12px;
      padding: 2px 6px;
      &.label-success {
        background: #0ABF71;
      }
      &.label-warning {
        background: #FF8000;
      }
    }
  }
</style>
